<template>
  <div class="page-preview-container">
    <div
      class="page-preview-page"
      :style="previewPageStyle"
    >
      <!-- 上边距线 -->
      <div
        v-if="marginTop > 0"
        class="margin-preview-line margin-top"
        :style="{
          top: `${marginTopPx}px`,
        }"
      ></div>
      <!-- 下边距线 -->
      <div
        v-if="marginBottom > 0"
        class="margin-preview-line margin-bottom"
        :style="{
          bottom: `${marginBottomPx}px`,
        }"
      ></div>
      <!-- 左边距线 -->
      <div
        v-if="marginLeft > 0"
        class="margin-preview-line margin-left"
        :style="{
          left: `${marginLeftPx}px`,
        }"
      ></div>
      <!-- 右边距线 -->
      <div
        v-if="marginRight > 0"
        class="margin-preview-line margin-right"
        :style="{
          right: `${marginRightPx}px`,
        }"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

defineOptions({
  name: "PagePreview",
});

interface Props {
  // 纸张宽度（厘米）
  width?: number;
  // 纸张高度（厘米）
  height?: number;
  // 方向：portrait（纵向）或 landscape（横向）
  orientation?: "portrait" | "landscape";
  // 上边距值
  marginTop?: number;
  // 上边距单位
  marginTopUnit?: string;
  // 下边距值
  marginBottom?: number;
  // 下边距单位
  marginBottomUnit?: string;
  // 左边距值
  marginLeft?: number;
  // 左边距单位
  marginLeftUnit?: string;
  // 右边距值
  marginRight?: number;
  // 右边距单位
  marginRightUnit?: string;
  // 预览最大宽度（像素）
  maxWidth?: number;
  // 预览最大高度（像素）
  maxHeight?: number;
}

const props = withDefaults(defineProps<Props>(), {
  width: 21,
  height: 29.7,
  orientation: "portrait",
  marginTop: 0,
  marginTopUnit: "cm",
  marginBottom: 0,
  marginBottomUnit: "cm",
  marginLeft: 0,
  marginLeftUnit: "cm",
  marginRight: 0,
  marginRightUnit: "cm",
  maxWidth: 150,
  maxHeight: 200,
});

// 根据方向确定实际显示的宽高
const displayWidth = computed(() => {
  if (props.orientation === "portrait") {
    return Math.min(props.width, props.height);
  } else {
    return Math.max(props.width, props.height);
  }
});

const displayHeight = computed(() => {
  if (props.orientation === "portrait") {
    return Math.max(props.width, props.height);
  } else {
    return Math.min(props.width, props.height);
  }
});

// 预览页面样式计算（根据纸张尺寸动态调整宽高比）
const previewPageStyle = computed(() => {
  const widthCm = displayWidth.value;
  const heightCm = displayHeight.value;
  
  // 计算宽高比
  const aspectRatio = widthCm / heightCm;
  
  // 根据宽高比和最大尺寸计算预览尺寸
  let previewWidth: number;
  let previewHeight: number;
  
  if (aspectRatio > 1) {
    // 横向（宽 > 高）
    previewWidth = Math.min(props.maxWidth, props.maxHeight * aspectRatio);
    previewHeight = previewWidth / aspectRatio;
  } else {
    // 纵向（高 >= 宽）
    previewHeight = Math.min(props.maxHeight, props.maxWidth / aspectRatio);
    previewWidth = previewHeight * aspectRatio;
  }
  
  return {
    width: `${previewWidth}px`,
    height: `${previewHeight}px`,
  };
});

// 单位转换函数（转换为厘米）
const convertToCm = (value: number, unit: string): number => {
  switch (unit) {
    case "pt": // 磅转厘米: 1pt = 0.0352778cm
      return value * 0.0352778;
    case "in": // 英寸转厘米: 1in = 2.54cm
      return value * 2.54;
    case "cm": // 厘米
      return value;
    case "mm": // 毫米转厘米: 1mm = 0.1cm
      return value * 0.1;
    default:
      return value;
  }
};

// 将厘米转换为像素（预览框内的比例）
const cmToPx = (cm: number): number => {
  const previewWidthPx = parseFloat(previewPageStyle.value.width);
  const previewHeightPx = parseFloat(previewPageStyle.value.height);
  const widthCm = displayWidth.value;
  const heightCm = displayHeight.value;
  
  // 计算像素比例：预览宽度像素 / 实际宽度厘米
  const widthRatio = previewWidthPx / widthCm;
  const heightRatio = previewHeightPx / heightCm;
  
  // 使用较小的比例，确保边距线不会超出预览框
  const ratio = Math.min(widthRatio, heightRatio);
  
  return cm * ratio;
};

// 边距转换为像素（先转换为厘米，再转换为像素）
const marginTopPx = computed(() => {
  const cm = convertToCm(props.marginTop || 0, props.marginTopUnit || "cm");
  return cmToPx(cm);
});

const marginBottomPx = computed(() => {
  const cm = convertToCm(props.marginBottom || 0, props.marginBottomUnit || "cm");
  return cmToPx(cm);
});

const marginLeftPx = computed(() => {
  const cm = convertToCm(props.marginLeft || 0, props.marginLeftUnit || "cm");
  return cmToPx(cm);
});

const marginRightPx = computed(() => {
  const cm = convertToCm(props.marginRight || 0, props.marginRightUnit || "cm");
  return cmToPx(cm);
});
</script>

<style lang="scss" scoped>
.page-preview-container {
  width: 100%;
  max-width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-preview-page {
  background-color: var(--editor-page-background, #ffffff);
  border: 1px solid var(--editor-border-color, rgba(0, 0, 0, 0.08));
  border-radius: var(--editor-radius, 3px);
  position: relative;
  overflow: hidden;
  transition: width 0.3s ease, height 0.3s ease;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
}

.margin-preview-line {
  position: absolute;
  background-color: var(--editor-primary-color, #0D61F2);
  border-radius: 0;
}

.margin-preview-line.margin-top {
  left: 0;
  width: 100%;
  height: 2px;
}

.margin-preview-line.margin-bottom {
  left: 0;
  width: 100%;
  height: 2px;
}

.margin-preview-line.margin-left {
  top: 0;
  width: 2px;
  height: 100%;
}

.margin-preview-line.margin-right {
  top: 0;
  width: 2px;
  height: 100%;
}

/* 暗色主题适配 */
[theme-mode="dark"] {
  .page-preview-page {
    /* 使用变量，暗色主题下会自动适配 */
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.2);
  }
}
</style>

